import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import * as moment from 'moment';
import { AuthCode, AuthCodeContext } from '@xforceplus/authcode';
import { Row, Col, Card, Modal, Timeline, Icon, Button } from 'antd';
import { getParcelLgtResult } from '../module/action';
//------------------------------------------------
import LogiProcess from './LogiProcess'
//mapping
import { logisticsStatus } from './mapping.js'
//------------------------------------------------



class SendModule extends Component {
  state = {
    logisticsModalVisible: false,
    sendList: [
      {
        id: '1', num: '32516253176', tel: '12345678900', data: '2018-11-11 12:00:29', collName: '张三', resName: '李四', collCompany: '寄件的公司',
        resCompany: '收件的公司', collAddr: '上海市宝山区沪太路2999弄国', resAddr: '上海市宝山区沪太路2999弄国'
      },
      {
        id: '2', num: '3254324176', data: '2018-11-11 12:00:29', collName: '张三', resName: '李四', collCompany: '寄件的公司',
        resCompany: '收件的公司', collAddr: '上海市宝山区沪太路2999弄国', resAddr: '上海市宝山区沪太路2999弄国'
      },
      {
        id: '3', num: '432535176', data: '2018-11-11 12:00:29', collName: '张三', resName: '李四', collCompany: '寄件的公司',
        resCompany: '收件的公司', collAddr: '上海市宝山区沪太路2999弄国', resAddr: '上海市宝山区沪太路2999弄国'
      },
      {
        id: '4', num: '32543536', data: '2018-11-11 12:00:29', collName: '张三', resName: '李四', collCompany: '寄件的公司',
        resCompany: '收件的公司', collAddr: '上海市宝山区沪太路2999弄国', resAddr: '上海市宝山区沪太路2999弄国'
      },
      {
        id: '5', num: '33323426', data: '2018-11-11 12:00:29', collName: '张三', resName: '李四', collCompany: '寄件的公司',
        resCompany: '收件的公司', collAddr: '上海市宝山区沪太路2999弄国', resAddr: '上海市宝山区沪太路2999弄国'
      },
    ]
  }

  showLogistics = (data) => {
    // console.log(`wuliu------>`, data)
    this.props.getParcelLgtResult({
      waybillNo: data.waybillNo,
      expressCode: data.expressCode,
    })
    this.setState({
      logisticsModalVisible: true
    })
  }
  closeLogistics = () => {
    this.setState({
      logisticsModalVisible: false
    })
  }

  render() {
    const { number, sendList, logisticsModalVisible } = this.state
    const {
      detail,
      sender,
      dataSource,//包裹总数
      parcelLgtResult,//快递信息
      parcelStatus,
      userReSource
    } = this.props;
    const noDate = <Col span={24} style={{ textAlign: 'center', margin: '10px 0' }}>暂无数据</Col>
    return (
      <div className="send-container scrollbar">
        <Row className="send-row">
          {dataSource && dataSource.length === 0 ? noDate : dataSource.map((item, index) => {
            return (<Col className="send-col text-center" span={12} key={index}>
              <Card
                title={<Row>
                  <Col className="card-user-img" span={2}><img src={item.expressLogo} alt={item.expressName} /></Col>
                  <Col style={{ textAlign: 'left' }} span={10}>运单号：{item.waybillNo}</Col>
                  <Col style={{ textAlign: 'left' }} span={10}>寄件时间：{moment(item.senderTime).utcOffset(-360).format('YYYY-MM-DD HH:mm:ss')}</Col>
                </Row>}
                extra={
                  <span className="color-blue" onClick={() => { detail(item, sender) }}>查看详情</span>
                  // <AuthCodeContext.Provider value={{ "authCodes": userReSource }}>
                  //   <AuthCode auth_code={'X00500001'}><span className="color-blue" onClick={() => { detail(item, sender) }}>查看详情</span></AuthCode>
                  // </AuthCodeContext.Provider>
                }
                style={{ width: '100%' }}>
                <Row>
                  <Col span={17}>
                    <Row className="send-card-body-t-row" type="flex" justify="start">
                      <Col className="send-card-body-l-col">寄件人</Col>
                      <Col className="send-card-body-r-col">
                        <div><label>寄件人：</label><span className="text-overflow" title={`${item.senderName}  ${item.senderTel}`}>{item.senderName}  {item.senderTel}</span></div>
                        <div><label>寄单位：</label><span className="text-overflow" title={item.senderCompanyName}>{item.senderCompanyName}</span></div>
                        <div><label>寄件地址：</label><span className="text-overflow" title={item.senderAddr}>{item.senderAddr}</span></div>
                      </Col>
                    </Row>
                    <Row className="send-card-body-b-row" type="flex" justify="start">
                      <Col className="send-card-body-l-col">收件人</Col>
                      <Col span={21} className="send-card-body-r-col">
                        <div><label>收件人：</label><span className="text-overflow" title={`${item.receiverName}  ${item.receiverTel}`}>{item.receiverName}  {item.receiverTel}</span></div>
                        <div><label>收单位：</label><span className="text-overflow" title={item.receiverCompanyName}>{item.receiverCompanyName}</span></div>
                        <div><label>收件地址：</label><span className="text-overflow" title={item.receiverAddr}>{item.receiverAddr}</span></div>
                      </Col>
                    </Row>
                  </Col>
                  <Col className="send-card-body-right" span={7}>
                    <Row type="flex" justify="space-between">
                      <Col span={12}>
                        <span className={parcelStatus && parcelStatus.businessLgtStatus === 4 ? 'errParcel' : ''} >{item.expressLgtStatus !== 0 ? logisticsStatus[item.expressLgtStatus] : ""}</span>
                      </Col>
                      <Col className="text-right" span={12}>
                        <span className="color-blue" onClick={() => { this.showLogistics(item) }}>查看</span>
                        {/* <AuthCodeContext.Provider value={{ "authCodes": userReSource }}>
                          <AuthCode auth_code={'X00500002'}><span className="color-blue" onClick={() => { this.showLogistics(item) }}>查看</span></AuthCode>
                        </AuthCodeContext.Provider> */}
                      </Col>
                      <Col span={24}><div>{item.expressLgtStatus !== 0 ? moment(item.expressSignTime).utcOffset(-360).format('YYYY-MM-DD HH:mm:ss') : ""}</div></Col>
                    </Row>
                    <Col span={24}>{item.data}</Col>
                  </Col>
                </Row>
              </Card>
            </Col>)
          })}
        </Row>
        <Modal
          title="物流进度"
          visible={logisticsModalVisible}
          onCancel={this.closeLogistics}
          wrapClassName="logistics-process"
          footer={<Button type="primary" onClick={this.closeLogistics}>关闭</Button>}
        >
          <LogiProcess data={parcelLgtResult} />
        </Modal>
      </div>
    );
  }
};

function mapStateToProps(state) {
  const { parcelLgtResult, userReSource } = state.logistics;
  return {
    parcelLgtResult,
    userReSource,//用户资源码
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    getParcelLgtResult,//获取快递信息
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SendModule);
